{% extends "base.html" %}
{% load staticfiles %}
{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h2>List of past queries <span style="font-size:12pt;float:right">click on query image to view results</span></h2>
        </div>
    </div>
</div>
</section>
<section class="content">
<div class="row">
    <div class="col-lg-12 col-md-12">
                <div class="row">
                {% for v in object_list %}
                    <div class="col-sm-3 col-xs-6">
                    <div class="box {% if v.results_available %} box-success {% else %} box-warning {% endif %}">
                    <div class="box-header with-border">
                        <h4 class="text-center">Created at {{ v.created }}</h4>
                        <h4 class="text-center">{% if v.results_available %} results available {% else %} waiting for results {% endif %}</h4>
                    </div>
                    <div class="box-body" style="min-height:300px">
                        <a href="/queries/{{ v.pk }}">
                            <img  class="img-responsive img-bordered" src="{{ MEDIA_URL }}queries/{{ v.pk }}.png" style="max-height:200px;max-width:80%;margin-left:auto;margin-right:auto"/>
                            <h4 class="text-center">{% if v.results_available %} <a  class="btn btn-success" href="/queries/{{ v.pk }}"><i class="fa fa-list"></i> View results</a> {% else %} <a class="btn btn-warning btwn disabled">waiting</a>{% endif %}</h4>
                        </a>
                    </div>
                    <div class="box-footer text-center">
                        <a href="/requery/{{ v.pk }}/" class="btn btn-info"><i class="fa fa-search"></i> Query again using image</a>
                    </div>
                    </div>
                    </div>
                {% endfor %}
                </div>
            </div>
</div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
    })
</script>
{% endblock %}
